//注册选项卡组件 - 内容 -a 
const TabsContentA = {
    template:'#tabs-item-a'
}

//注册选项卡组件 - 内容 -b 
const TabsContentB = {
    template:'#tabs-item-b'
}

//注册选项卡组件 - 内容 -c 
const TabsContentC = {
    template:'#tabs-item-c'
}

//注册选项卡组件 - 内容 -d 
const TabsContentD = {
    template:'#tabs-item-d'
}

//注册选项卡组件 - 内容 -e 
const TabsContentE = {
    template:'#tabs-item-e'
}

//注册选项卡组件 - 导航
Vue.component('tabs-nav-component' , {
    props:['tabsData','currentIndex'],
    template:'#tabs-nav-tpl',
    methods:{
        changeCurrentIndex(index){
            console.log(index);
            this.$emit('update:current-index',index)
        }
    }
})

//注册选项卡组件 - 内容
Vue.component('tabs-content-component' , {
    props:["currentIndex"],
    template:'#tabs-content-tpl',
    components:{
        TabsContentA,
        TabsContentB,
        TabsContentC,
        TabsContentD,
        TabsContentE
    }
})

//注册选项卡组件
Vue.component('tabs-component' , {
    template:'#tabs-tpl',
    data(){
        return {
            currentIndex:0 ,//默认显示的索引值
            tabsData:['首页','天猫','聚划算','京东','苏宁易购']
        }
    }
})



let app = new Vue({
    el:"#app"
})